<template>
	<!-- 我的证书 -->
	
	<view class="rules-view" :style="`min-height: ${windowHeight}px`">
		<!-- #ifdef MP-WEIXIN -->
		<view class="top">
			<view :style="{
				paddingTop: statusBarHeight + 'px', 
				height: titleHeight + 'px',
				lineHeight: titleHeight + 'px',
			}" class="nav" @click="handleBack">
				<up-icon name="arrow-left"></up-icon>
				<view>我的证书</view>
			</view>
		</view>
		<!-- #endif -->
		
		<view class="card-view" :style="`padding-top: ${statusBarHeight + titleHeight + 10}px`">
			<view class="card-point">
				<view class="tilte">集证书</view>
				<view class="subtitle">解锁站点即可获得证书</view>
				<view class="card-list">
					<view class="card-item" :style="`width: ${cardWidth}px`" v-for="(item, index) in cardData.activityCardList" :key="index">
						<view v-if="cardData.selfCardList == null">
							<up-image :src="img" :width="`${cardWidth}px`" height="129px" radius="2"></up-image>
						</view>
						<view v-else>
							<view v-if="selfCardList.length > 0">
								<up-image :src="selfCardList.indexOf(item.cardName)!==-1?item.cardPicture:img" :width="`${cardWidth}px`" height="128px" radius="2"></up-image>
							</view>
							<view v-else>
								<up-image :src="img" :width="`${cardWidth}px`" height="129px" radius="2"></up-image>
							</view>
							
						</view>
						<view style="margin-top: 10rpx;">{{item.cardName}}</view>
					</view>
				</view>
				<up-empty mode="data" text="暂无证书" icon="https://jqgh-public.yqfoodec.com/20250405/%E7%BB%84%2016@2x_53897.png" v-if="!cardData.activityCardList"></up-empty>
				
			</view>
			<view class="card-point">
				<view class="rule-title">集证书规则说明</view>
				<view class='rule-explanation'>
					解锁关卡后，会依次获得“薪火传承，坚强后盾，城市丰碑，时光记忆 ，国家情怀，星火燎原"证书，集齐所有证书即完成本次活动任务
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { string } from '../uni_modules/uview-plus/libs/function/test';
	import { activityApi } from '@/api/activity/activity-app.js';
	export default {
		data() {
			return {
				titleHeight: 0,
				statusBarHeight: 0,
				windowHeight: 0,
				cardData: {},
				img: 'https://jqgh-public.yqfoodec.com/20250408/card_73507.jpg',
				customData: [
					'劳模精神', '劳动精神', '工匠精神', '首都工匠', '大国工匠', '喜迎华诞'
				],
				selfCardList: [],
				cardWidth: 0
			}
		},
		onLoad(options) {
			this.getsize()
			this.getDataList(options.id)
			
		},
		methods: {
			getsize() {
				let titleHeight = 0
				const { statusBarHeight, system } = uni.getSystemInfoSync()
				
				if (system.indexOf('Android') > 0) {
					titleHeight = 48
				} else {
					titleHeight = 44
				}
				this.titleHeight = titleHeight
				this.statusBarHeight = statusBarHeight
		
				let that = this
				uni.getSystemInfo({ // .windowHeight
					success(res) {
					  that.windowHeight = res.windowHeight
					  let width = res.windowWidth-(4*16)
					  that.cardWidth = width / 3 - 10
					},
				})
			},
			async getDataList(id){
				const result = await activityApi.getMyCard(id);
				// console.log(result)
				this.cardData = result.data
				if (result.data.selfCardList !==null) {
					let selfCardList = []
					result.data.selfCardList.forEach(item => {
						selfCardList.push(item.cardName)
					})
					this.selfCardList = selfCardList
				}
			},
			handleBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rules-view {
		background-image: url(https://jqgh-public.yqfoodec.com/20250405/imagebg@2x_53966.png);
		background-size: 100% 100%;
		position: relative;
		.top {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			.nav {
				display: flex;
				color: #fff;
				padding-left: 5px;
				
				:deep(.u-iconfont) {
					color: #fff !important;
				}
			}
		}
		.card-view {
			padding-left: 16px;
			padding-right: 16px;
			padding-bottom: 30rpx;
			.card-point {
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 30rpx;
				padding: 16px;
				.tilte {
					font-size: 48rpx;
					color: #FC820A;
					text-align: center;
				}
				.subtitle {
					color: #8C8C8C;
					font-size: 28rpx;
					text-align: center;
				}
				.card-list {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					margin-top: 30rpx;
					.card-item {
						// flex: 1;
						text-align: center;
						font-size: 28rpx;
						// padding: 10rpx;
						margin: 0 5px 10px 5px;
					}
				}
				.card-list::after {
					height: 0;
					visibility: hidden;
				}
			}
		}
	}
	.rule-title {
		font-size: 32rpx;
	}
	.rule-explanation {
		color: #8C8C8C;
		font-size: 28rpx;
		margin: 20rpx 0;
	}
</style>
